<template>
    <div class="user">
        <div v-show="isLogin===true" class="user-haeder">
            <div class="header-one">
                <div class="header-img">
                    <img src="../assets/myicon.jpg" alt="">
                </div>
                <div class="header-two">
                    <div class="user-name">{{username}}</div>
                    <div class="user-info">未题写职业，城市信息</div>
                </div>
            </div>
            <div class="header-footer">
                <div>
                    <!-- <div class="num" v-if="item.isshow">{{guanzhu}}</div>
                    <div class="num" v-if="guanids===null">{{item.num}}</div>
                    <div class="num" v-if="guanids!=null">{{item.num}}</div>
                    <div class="num" v-if="item.isshow">0</div> -->
                    <div class="num">0</div>
                    <div class="fen">粉丝</div>
                </div>
                <div @click="myFollow(isshow)">
                    <div class="num">{{guanzhu}}</div>
                    <div class="num" v-if="guanids===null">0</div>
                    <div class="fen">关注</div>
                </div>
                 <div>
                    <div class="num">0</div>
                    <div class="fen">收藏</div>
                </div>
            </div>
        </div>
        <div v-show="isLogin===false" class="user-header-one">
            <div class="userinfo">
                <div class="img" @click="goto">
                    <img src="../assets/moren.jpg" alt="">
                </div>
                <div class="isLogin">点击登录</div>
            </div>
        </div>

        <div class="user-vip">
            <div class="user-vip-info">
                <div class="user-vip-info-img">
                    <div class="info-img">
                        <img src="../assets/vip.jpg" alt="">
                    </div>
                </div>
                <div class="user-vip-info-msg">
                    <div class="vip">开通新片场会员</div>
                    <div class="vip-msg">享免课程，高校合作</div>
                </div>
                <div class="user-vip-info-right">
                    <span class="right-info">了解特权</span>
                    <div class="right-info1">
                        <span class="right-info1"><img src="../assets/右箭头.png" alt=""></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="user-center">
            <div class="center">
                <div class="cneter-left">创作中心</div>
                <div class="center-right">草稿箱</div>
            </div>
            <div class="center-msg">
                <div class="center-msg-left">
                    <div>
                        <van-icon name="send-gift-o" />
                    </div>
                    <div class="center-msg-right">
                        <div class="right-one">发布公开作品</div>
                        <div class="right-two">分享你的个人作品</div>
                    </div>
                </div>
                <div class="center-msg-left a">
                    <div>
                        <van-icon name="video-o" />
                    </div>
                    <div class="center-msg-right">
                        <div class="right-one">上传私密视频</div>
                        <div class="right-two">加密分享，高清播放</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="usermsg">
            <div class="cell">
                <van-cell-group>
                    <van-cell  v-show="isLogin===true" title="注销用户" @click="logoff" />
                    <van-cell title="传输列表" />
                    <van-cell title="会员中心" />
                    <van-cell>
                        <template #title>
                            <span class="custom-title">私密视频</span>
                            <van-tag plain text-color="#CB7075" type="danger">私密视频都挪到这儿啦</van-tag>
                        </template>
                    </van-cell>
                    <van-cell title="我的课程" />
                    <van-cell title="我的订单" />
                    <van-cell value="好的作品值得被更多的人看见">
                        <template #title>
                            <span class="custom-title">作品通</span>
                            <van-tag plain text-color="#CB7075" type="danger">推荐</van-tag>
                        </template>
                    </van-cell>
                    <!-- <van-cell title="注销用户" @click="logoff" /> -->
                </van-cell-group>
            </div>
            <div class="footer-cell">
                <van-cell title="新片场认证" />
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"user1",
        data(){
            return{
                isFure:false,
                isLogin:false,
                username:'',
                fans:[
                    {
                        title:'粉丝',
                        num:0
                    },
                    {
                        title:'关注',
                        isshow:true
                    },
                    {
                        title:'收藏',
                        num:0
                       
                    }
                ],
                guanzhu:'0',
                isshow:true,
                guanids:[]
                
            }
        },
        created(){
            // this.$toast.loading({
            //     message: '加载中...',
            //     forbidClick: true,
            // })
            this.getToke()
        },
        activated(){
            // let isLogin = JSON.parse(localStorage.getItem("toke"));
            //     if(isLogin != null){
            //         if(isLogin.nickName!= '' && isLogin.password!= '' && isLogin.phone!= ''){
            //             this.username = isLogin.nickName;
            //             this.isLogin = false;
            //         }
            // }
            this.getToke()
        },
        watch:{
        },
        methods:{
            goto(){
                this.$router.push({name:"Login"})
            },

            myFollow(isshow){
                // if(e.target.className === 'fen'){
                //     this.$router.push({name:"Myfollow"})
                // }
                if(isshow === true){
                    this.$router.push({name:"Myfollow",query:{id:this.guanids}})
                }
            },
            
            logoff(){
                localStorage.removeItem("toke");
                localStorage.removeItem('userid')
                localStorage.removeItem('biaoji')
                this.isLogin = false
            },
            getToke(){
                let isLogin = JSON.parse(localStorage.getItem("toke"));
                if(isLogin===null){
                    return;
                }else if(isLogin.isFure === true){
                   
                    if(isLogin.arr.nickName!= '' && isLogin.arr.password!= '' && isLogin.arr.phone!= ''){
                        this.username = isLogin.arr.nickName;
                       
                        this.isLogin = isLogin.isFure;

                        let guanid = JSON.parse(localStorage.getItem("userid"))
                        if(guanid ==null){
                            return;
                        }else{
                             this.guanids=guanid
                       
                         this.guanzhu=guanid.length
                        }   
                       
                        
                    }
                }
            },
        }
    }
</script>

<style lang="less" scoped>
.a{
    margin-left: 10px;
}
/deep/.van-icon{
    font-size: 30px;
    padding-top: 5px;
}
/deep/.van-tag--danger.van-tag--plain{
    margin-left: 10px;
}
/deep/.van-cell__value{
    font-size: 12px;
}
.num{
    font-size: 13px;
    font-weight: 700;
}
.fen{
    color: #A5A5A5;
}
.user{
    height: calc(100vh - 50px);
    overflow-y: auto;
    background-color: #F4F4F4;
    .user-haeder{
        width: 100%;
        .header-one{
            padding:40px 15px;
            border-bottom: 1px solid #f7f7f7;
            display: flex;
            .header-img{
                    // border-radius: 50%;
                    // overflow: hidden;
                >img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    overflow: hidden;
                    display: inline-block;
                }
            }
            .header-two{
                padding-left: 10px;
                .user-name{
                    padding-top: 5px;
                    font-weight: 700;
                    font-size: 15px;
                }
                .user-info{
                    padding-top: 5px;
                    color: #A5A5A5;
                }
            }
        }
        .header-footer{
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            background-color: #FEFEFE;
            >div{
                padding: 10px;
                text-align: center;
            }
        }
    }
    .usermsg{
        .footer-cell{
            margin-top: 10px;
        }
    }
    .user-header-one{
        width: 100%;
        position: relative;
        padding: 15px 0px;
        .userinfo{
            margin: 0 auto;
            padding: 20px 0;
            text-align: center;
            .img{
                >img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    overflow: hidden;
                }
            }
            .isLogin{
                padding-top: 15px;
            }
        }
    }
    .user-vip{
        // width: 100%;
        padding: 15px 15px;
        background-color: #FFFFFF;
        .user-vip-info{
            display: flex;
            background: #282828;
            border-radius: 5px;
            overflow: hidden;
            padding: 10px;
            .user-vip-info-img{
                .info-img{
                    >img{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                }
            }
            .user-vip-info-msg{
                padding-left: 10px;
                .vip{
                    padding-top: 2px;
                    font-weight: 700;
                    color: #F2D2CC;
                    font-size: 15px;
                }
                .vip-msg{
                    padding-top: 2px;
                    color: #8A8A8A;
                }
            }
            .user-vip-info-right{
                margin-left: auto;
                
                display: flex;
                align-items: center;
                .right-info{

                    padding-right: 8px;
                    color: #FCFCFC;
                    font-size: 14px;
                    display: inline-block;
                }
                .right-info1{
                    font-size: 16px;
                    font-weight: 700;
                    background-color: #FFFFFF;
                    width: 20px;
                    height: 20px;
                    text-align: center;
                    border-radius: 50%;
                    overflow: hidden;

                    img{
                      position: relative;
                      top: 30%;
                      left: 20%;
                      transform: translate(-50%,-50%);
                      width: 10px;
                      height: 10px;
                      }
                }
            }
        }
    }
    .user-center{
        padding: 15px;
        .center{
            padding-bottom: 5px;
            display: flex;
            justify-content: space-between;
            .cneter-left{
                font-size: 15px;
            }
        }
        .center-msg{
            display: flex;
            justify-content: space-between;
            .center-msg-left{
                width: 48%;
                background-color: #FFFFFF;
                padding: 10px;
                border-radius: 5px;
                display: flex;
            }
            .center-msg-right{
                padding-left: 5px;
                .right-one{
                    font-size: 14px;
                }
                .right-two{
                    font-size: 12px;
                    color: #BEBEBE;
                }
            }
            
        }
    }
}
</style>